<template>
	<view class="pad20">
		<view class="head-bg h-204 padtb40 padlr20 flex-a ju-bt" 
			:style="{
				'background': `url(${getImg('invite-head-bg')}) no-repeat`,
			}"
		>
			<view 
				class="head-statistics" 
				v-for="(item, index) in statisticsList" 
				:key="index"
				@click="$goRouter(item.path)"
			>
				<view class="head-li-tit">
					{{ item.label }}
				</view>
				<view class="head-li-val mar-t24">
					<text class="f-s24" v-if="item.unit">¥</text>
					<text>{{ item.val }}</text>
				</view>
			</view>
		</view>
		<view class="block-box padtb24 padlr20 mar-t20">
			<view class="block-tit f-s28">
				邀客攻略
			</view>
			<view class="flex-a strategy-box mar-t24">
				<u--image
					:src="getImg('share-l-img')"
					width="112rpx" 
					height="112rpx"
				></u--image>
				<view class="flex-col flex-centerstrategy-info w-320">
					<view class="txt-center">
						分享体验项目礼包给好友
					</view>
					<view class="martb4 flex-center">
						<u--image
							:src="getImg('LorR-ling')"
							width="291rpx" 
							height="31rpx"
						></u--image>
					</view>
					<view class="txt-center">
						我获得奖励
					</view>
				</view>
				<view class="strategy-r flex-a ">
					<u--image
						:src="getImg('share-r-img')"
						width="112rpx" 
						height="112rpx"
					></u--image>
					<view class="w-120 mar-l8">
						朋友购买或进店消费
					</view>
				</view>
			</view>
		</view>
		<view class="block-box flex-a ju-bt mar-t20 pad24">
			<view class="block-tit f-s32">
				我的礼品
			</view>
			<view class="">
				<u-tabs
				 	:list="tabsList"
				 	lineColor="#FF7171"
				 	lineHeight="6rpx"
					lineWidth="96rpx"
				 	:activeStyle="{
				 		color: '#111111',
				 		fontWeight: 'bold',
				 		transform: 'scale(1.03)'
				 	}"
				 	:current="tabsCurrent"
				 	@change="tabsChange"
				 >
				 </u-tabs>
			</view>
		</view>
		<view class="list-box ">
			<view 
				class="block-box list-li pad24 mar-t20" 
				v-for="(item, index) in 4" 
				:key="index"
			>
				<view class="block-tit flex-a ju-bt" @click="onLiMore(index)">
					<view class="f-s">
						光子嫩肤
					</view>
					<u-icon 
						:name="selectArr.includes(index) ? 'arrow-up': 'arrow-down' " 
						color="#666666"
						bold
						size="20rpx"
						top="1"
					></u-icon>
				</view>
				<view class="li-more" v-if="selectArr.includes(index)">
					<u-line margin="16rpx 0 0"></u-line>
					<view class="li-product mar-t22 flex">
						<u--image
							:src="getImg('swiper-img')"
							width="192rpx" 
							height="144rpx"
							radius="16rpx"
						></u--image>
						<view class="product-info pad-l14 h-144">
							<view class="product-tit">
								王牌美白淡斑组合套餐8.8秒杀
							</view>
							<view class="product-tips text-elpis mar-t10">
								爱美丽美容新客专属礼遇，仅需8.8元即可仅需
							</view>
							<view class="product-share flex-a ju-bt mar-t18">
								<view class="share-tit">
									好友可分享次数9999
								</view>
								<view class="share-btn flex-center" @click="onShare">
									送出
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="li-fot flex-a ju-bt mar-t24" >
					<view class="fot-txt">
						好友可免费领取
					</view>
					<view 
						class="share-btn flex-center" 
						v-if="!selectArr.includes(index)"
						 @click="onShare"
					>
						送出
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script> // 邀客
	export default {
		data() {
			return {
				tabsList: [
					{
						name: "可赠送"
					},
					{
						name: "可赠送"
					},
				],
				tabsCurrent: 0,
				selectArr: [],
				statisticsList: [
					{
						label: "返利余额",
						val: "246.84",
						unit: "¥",
						path: "/pages/my/pages/rebateBalance"
					},
					{
						label: "邀客积分",
						val: "1200",
						path: "/pages/my/pages/inviteIntegral"
					},
					{
						label: "我的好友",
						val: "84",
						path: "/pages/my/pages/myFriend",
					},
				]
			}
		},
		onLoad() {
			
		},
		methods: {
			onShare() {
				this.$goRouter("/pages/my/pages/shareDetail")
			},
			onLiMore(index) {
				let indexOf = this.selectArr.indexOf(index)
				if(~indexOf) {
					this.selectArr.splice(indexOf, 1)
				}else {
					this.selectArr.push(index)
				}
			},
			tabsChange(eve) {
				this.tabsCurrent = eve.index
			},
		}
	}
</script>

<style lang="scss" scoped>
	.list-box {
		.li-fot {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
		}
		.li-product {
			.product-info {
				width: calc(100% - 192rpx);
				.product-tit {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #111111;
				}
				.product-tips {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 22rpx;
					color: #666666;
				}
				.product-share {
					.share-tit {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
					}
					
				}
			}
		}
		.share-btn {
			width: 108rpx;
			height: 46rpx;
			background: #FF7171;
			border-radius: 60rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
		}
	}
	.strategy-box {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #666666;
		.strategy-r {
			text-align: right;
		}
	}
	.block-box {
		border-radius: 16rpx;
	}
	.head-bg {
		.head-statistics {
			.head-li-tit {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
			}
			.head-li-val {
				font-family: MiSans, MiSans;
				font-weight: 500;
				font-size: 48rpx;
				color: #000000;
			}
		}
		background-size: 100% 100% !important;
	}
</style>
<style>
	page {
		background: #F5F5F5;
	}
</style>
